<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax评论案例</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <!-- Bootstrap -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3>发表评论</h3>
        </div>
        <div class="panel-body">
            <form id="fromAddCmt">
                <label>评论人：</label>
                <input type="text" class="form-control" name="username">
                <label>评论内容：</label>
                <textarea type='text' class="form-control" rows="3" name="content"></textarea>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>
        </div>

     
    </div>

    <!-- 评论列表 -->

    <ul class="list-group" id="cmtlist">
        <li class="list-group-item">
            <span class="badge" style="background-color: orchid;">评论时间:</span>
            <span class="badge" style="background-color:aquamarine;">评论人:</span>
        评论内容
        </li>
    </ul>

    <!--   -->
    <script>
        // 渲染
        function getCmtList(){
            $.ajax({
                method:'GET',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                success:function(result){
                    if(result.status === 200){
                        console.log(result);
                        // 解构
                        let {status, msg, data} = result
                        console.log(data)

                        var arrStr = [];
                        $.each(data, function(i, item){
                            var str = `
                            <li class="list-group-item">
                                <span class="badge" style="background-color: orchid;">评论时间:${item.time}</span>
                                <span class="badge" style="background-color:aquamarine;">评论人:${item.username}</span>
                            ${item.content}
                            </li>
                            `
                            arrStr.push(str);
                        })
                        console.log(arrStr);
                        $('#cmtlist').empty().append(arrStr)
                    }
                }
            })
        }
        
        getCmtList()

        // 添加评论
        $(function(){
            $('#fromAddCmt').submit(function(e){
                // 要先校验客户提交的数据,格式是否正确,或者你还需要对这些数据进行一个处理再提交,就需要先阻止下默认提交表单的行为
                // 阻止默认事件（阻止刷新页面）
                e.preventDefault();
                // 快速获取表单数据 注意表单中必须要有name属性
                var data = $(this).serialize();
                // console.log(data)

                // 上传添加
                $.post('http://www.liulongbin.top:3006/api/addcmt', data , function(result){
                    console.log(result);
                    if(result.status === 201){
                        getCmtList();
                        alert(result.msg);
                        // 清空表单数据
                        $("#fromAddCmt")[0].reset()
                    }else return result.msg
                })
            })
        })
    </script>
</body>
</html>